<template>
	<view class="bigView">
		<view class="topView">
			<image src="https://l-cllyert.oss-accelerate.aliyuncs.com/video_file/mine_top_bg.png" style="width: 100vw;"></image>
		</view>
		<view class="cu-custom" :style="[{height:TopHeight + 'px'}]">
			<view class="title" :style="[{height:'44px',marginTop: StatusBar+'px'}]">
				我的
			</view>
			<view class="minInfo" @click="toLogin">
				<image class="headImg" :src="'../../static/img/user_placeholder_img.png'" v-if="Object.keys(userInfo).length==0"></image>
				<image class="headImg" :src="userInfo.headPicUrl" @click="headImgHandle" v-else></image>
				<view style="margin-left: 32rpx;font-size: 16px;display: flex;flex-direction: column;">
					<view style="color: #313742;font-size: 34rpx;font-weight: bold;">
						{{Object.keys(userInfo).length==0?'未登录':currentUserName}}
					</view>
					<view style="color: #777777;font-size: 28rpx;display: flex;flex-direction: row;" v-if="Object.keys(userInfo).length>0 && userInfo.entryTime">
						<view >已加入嘉园
							<text style="color: #3275FA;margin-left: 5px;margin-right: 5px;">{{diffDay}}</text>
						天</view>
					</view>
					
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: column;overflow-y: auto;">
			<view class="calendarView">
				<view class="signBigView">
					<view style="margin-left: 16px;font-size: 16px;">本月累计签到
					<label style="color: #247BFD;font-weight: bold;margin-left: 5px;margin-right: 5px">{{signInfo.signInDays}}</label>天</view>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view style="margin-right: 8px;" @click="change2">
							<u-icon name="volume-off" size="18" v-if="checked!='1'"></u-icon>
							<u-icon name="volume" size="18" v-else></u-icon>
						</view>
						<image @click="signCalendarHandle" src="../../static/img/icon_rili.png" style="width: 17px;height: 17px;margin-right: 16px;"></image>
						<view class="signView2" style="margin-right: 32rpx;" @click="signHandle">{{signInfo.isSignIn=='1'?'已签到':'签到'}}</view>
					</view>
				</view>
				<view class="signBottomView">
					<view class="redPacketItmeView" v-for="(item,index) in signList" :key="index">
						<view class="redPacketView">
							<view class="redPacketImgView">
								<image :src="item.checkStatus=='1'?'../../static/img/red_packet_open.png':'../../static/img/red_packet_close.png'" class="redPacketImg"></image>
								<view :class="['redPacketNum',item.checkStatus=='1'?'redPacketNumSel':'redPacketNumNor']">+5</view>
							</view>
							<view :class="['redPacketRightLine',item.checkStatus=='1'?'redPacketRightLineSel':'redPacketRightLineNor']" v-if="index+1!=signList.length"></view>
						</view>
						<view class="redPacketTitle">{{item.checkStatus=='1'?'已领取':('第'+(index+1)+'天')}}</view>
					</view>
				</view>
			</view>
			
			<view class="minInfoCell">
				<view class="minInfoItem" v-for="(item,index) in list" :key="index" @click="mineCellHandle(item.id)">
					<image :src="item.name" class="leftIcon"></image>
					<view style="flex-grow: 1;font-size: 30rpx;color:#313742;line-height: 18px;">{{item.title}}</view>
					<view style="margin-right: 16px;color: #E2750A;font-size: 28rpx;" v-if="item.subTitle">{{points}}</view>
					<image src="../../static/img/ic_arrowgray.png" style="width: 6px;height: 10px;margin-right: 16px;" v-if="item.id!=3"></image>
				</view>
			</view>
			<view class="logout" @click="logoutHandle" v-if="Object.keys(userInfo).length>0">退出登录</view>
		</view>
		
		<wu-calendar ref="calendar" :disabledChoice="true" :insert="false" @monthSwitch="monthSwitchHandle" @change="calendarChange" :selected="selected" ></wu-calendar>
	</view>
</template>
	
<script>
	import { getCurrentDate,countdownDays, isJZNull } from '../../utils/auth';
	import mine from '@/api/mine.js'
	import points from '@/api/points.js'
	export default{
		data(){
			return{
				StatusBar: this.StatusBar,
				CustomBar: 0,//this.$statusBarHeight
				TopHeight:0,
				userInfo:{},
				signInfo:{},
				checked: '0',
				signList:[],
				points:'',
				userInfo2:{},
				currentUserName:'',
				audioContext: null,
				diffDay:0,
				selected: [
					// {
					// 	date: '2024-09-24',
					// 	// info: '3积分',
					// 	infoColor: '#6ac695',
					// 	topInfo: '3积分',
					// 	topInfoColor: '#6ac695',
					// 	badgeColor: '#6ac695',
					// 	// disable: true // 禁用
					// 	badge:true,
					// 	badgePosition:'bottom-center'
					// }
				],
				list: [{
					name: '/static/img/fuwudating/icon_tuandui.png',
					title: '个人信息查询',
					id:1
					},
					{
						name: '/static/img/fuwudating/ic_baodao.png',
						title: '信息认证',
						id:5
					},
					// {
					// 	name: '/static/img/fuwudating/icon_qianbao.png',
					// 	title: '打卡信息查询',
					// 	id:2
					// },
					{
						name: '/static/img/fuwudating/icon_hongbao.png',
						title: '总收益',
						subTitle:'999',
						id:3
					},
					// {
					// 	name: '/static/img/me_ziliao.png',
					// 	title: '完善资料'
					// },
					
					
					{
						name: '/static/img/scan.png',
						title: '扫一扫',
						id:6
					},
					{
						name: '/static/img/scan.png',
						title: '出示付款码',
						id:7
					},
					{
						name: '/static/img/scan.png',
						title: '设置支付密码',
						id:8
					},
					{
						name: '/static/img/fuwudating/icon_gaimima.png',
						title: '修改密码',
						id:4
					},
				]
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.TopHeight = this.CustomBar+143;//this.StatusBar+this.CustomBar;
					// Vue.prototype.StatusBar = e.statusBarHeight;
					// let custom = wx.getMenuButtonBoundingClientRect();
					// Vue.prototype.Custom = custom;
					// Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
			}})
			this.test()
			this.getGlodStatus()
		},
		onShow() {
			this.$nextTick(() =>{
				this.initUserInfo()
			})
		},
		methods:{
			change(status) {
				 console.log(status);
				 uni.setStorageSync("glodStatus",status)
			},
			change2(){
				if (isJZNull(this.checked) || this.checked=='0') {
					this.checked = '1';
				}else{
					this.checked = '0';
				}
				uni.setStorageSync("glodStatus",this.checked)
			},
			async getGlodStatus(){
				const glodStatus = await uni.getStorageSync('glodStatus');
				this.checked = glodStatus;
			},
			test(){
				this.audioContext = uni.createInnerAudioContext();
				this.audioContext.src = '/static/img/gold.mp3';
				this.audioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.audioContext.onError((err) => {
				  console.log(err);
				});
				this.audioContext.onEnded(() => {
				  console.log('播放结束');
				});
			},
			headImgHandle(){
				let that = this;
				uni.showActionSheet({
					itemList:["从相册选择图片"],
					success(e) {
						uni.chooseImage({
							count:1,
							sizeType:['compressed'],
							success(response) {
								// 选择图片后, 返回的数据
								var fileUrl = response.tempFilePaths[0]
								// uni.showModal({
								// 	title: fileUrl
								// })
								that.uploadImgHandle(fileUrl)
							}
						})
					}
				})
			},
			uploadImgHandle(fileUrl){
				let fileOfBlob = {
					'file': fileUrl
				}
				uni.uploadFile({
				    url: 'https://ht.rhzsz.com/api2/jialife/public/file/upload', // 仅为示例，请替换为实际接口地址
				    filePath: fileUrl,//fileOfBlob.url, // 要上传文件资源的路径
				    name: 'file', // 文件对应的key，开发者在服务器端通过这个key可以获取到文件数据
				    formData: fileOfBlob,
					header: {
						'Content-Type': 'multipart/form-data', // 默认值，通常不需要显式设置
						'Authorization': uni.getStorageSync('uni_session'), // 假设你需要一个授权令牌
						// 其他自定义的请求头
					},
				    success: (uploadFileRes) => {
						console.log("成功")
						console.log(uploadFileRes)
						let item = JSON.parse(uploadFileRes.data)
						console.log("成功2")
						console.log(item)
						// uni.showModal({
						// 	title: item.data.url
						// })
						mine.updateUserProfile({headPicUrl: item.data.url,id:this.userInfo.id}).then(res=>{
							uni.showToast({
								icon:'none',
								title:"修改成功"
							})
							this.userInfo.headPicUrl = item.data.url;
							uni.setStorageSync("userInfo",JSON.stringify(this.userInfo))
						})
				    },
					fail:(err) => {
						
					}
				});
			},
			toLogin(){
				if (Object.keys(this.userInfo).length==0) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
					if (this.userInfo.realName) {
						this.currentUserName = this.userInfo.realName
					}else if (this.userInfo.name) {
						this.currentUserName = this.userInfo.name
					} else{
						this.currentUserName = this.userInfo.phone
					}
					this.diffDay = countdownDays(this.userInfo.entryTime)
				}
				this.listIsSign()
				this.getUserHandle()
			},
			getUserHandle(){
				if (Object.keys(this.userInfo).length==0) {
					return
				}
				mine.getUserHandle({id:this.userInfo.id}).then(res =>{
					this.userInfo2 = res;
				}).catch(err =>{
					
				})
			},
			myPointsHandle(){
				mine.myPointsHandle({}).then(res =>{
					this.points = res;
				}).catch(error =>{
					
				})
			},
			listIsSign(){
				mine.listIsSign({}).then(res =>{
					this.signInfo = res;
					this.listHandle()
					this.myPointsHandle()
				}).catch(error =>{
					
				})
			},
			listHandle(){
				mine.listHandle({}).then(res =>{
					this.signList = res;
				}).catch(error =>{
					
				})
			},
			signInAdd(){
				uni.showLoading({
					title:"正在签到..."
				})
				mine.signInAdd({}).then(res =>{
					uni.hideLoading()
					this.audioContext.play();
					// uni.showToast({
					// 	title:'签到成功'
					// })
					if (this.checked=='1') {
						this.audioContext.play();
					}
					this.initUserInfo()
					uni.showModal({
						title:"签到成功",
						showCancel:false,
						complete() {
							
						}
					})
					
				}).catch(error =>{
					uni.hideLoading()
				})
			},
			calendarChange(value){
				console.log(value)
			},
			monthSwitchHandle(value){
				console.log(value)
				this.signInRecordList(value.fullDate)
			},
			signInRecordList(month){
				uni.showLoading({
					title:'加载中,请稍候...'
				})
				mine.signInRecordList({"yearsByMonth": month}).then(res =>{
					uni.hideLoading()
					this.selected = [];
					let selectedList = [];
					for (var i = 0; i < res.records.length; i++) {
						let item = res.records[i];
						selectedList.push({
							date: item.ruleSettingsDate??'',
							// info: '3积分',
							infoColor: item.checkStatus=='1'?'#6ac695':'red',
							topInfo: item.ruleSettings+'积分',
							topInfoColor: item.checkStatus=='1'?'#6ac695':'red',
							badgeColor: item.checkStatus=='1'?'#6ac695':'red',
							// disable: true // 禁用
							badge:true,
							badgePosition:'bottom-center'
						})
					}
					// uni.showModal({
					// 	title:selectedList.length+''
					// })
					// this.$refs.calendar.clearSelect();
					this.selected = selectedList;
					console.log(this.selected)
				}).catch(err =>{
					uni.hideLoading()
				})
			},
			logoutHandle(){
				uni.showLoading({
					title:'正在退出...'
				})
				uni.setStorageSync("uni_session","")
				uni.setStorageSync("userInfo","")
				setTimeout(() => {
					uni.hideLoading()
					uni.reLaunch({
						url:'/pages/login/login'
					})
				},500)
				
			},
			signHandle(){//签到
				if(this.signInfo && this.signInfo.isSignIn=='1'){
					return;
				}
				if (Object.keys(this.userInfo).length==0 || Object.keys(this.userInfo2).length==0 ) {// 如果没有登录，直接退到登录页面
					uni.setStorageSync("uni_session","")
					uni.setStorageSync("userInfo","")
					setTimeout(() => {
						uni.hideLoading()
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},500)
					return
				}
				if (Object.keys(this.userInfo2).length>0 && this.userInfo2.dutyStatus != 2) {
					uni.navigateTo({
						url: '/pageageMine/pages/completeInfo'
					})
					return;
				}
				this.signInAdd();
			},
			signCalendarHandle(){//签到日历
				let currentYM = getCurrentDate()
				this.signInRecordList(currentYM)
				this.$refs.calendar.open();
			},
			mineCellHandle(value){
				switch (value){
					case 1://个人信息查询
						uni.navigateTo({
							url:'/pageageMine/pages/personInfo'
						})
						break;
					// case 2:// 打卡信息推送
					// 	uni.navigateTo({
					// 		url:'/packageJyserve/pages/zhyq/clock_in'
					// 	})
					// 	break;
					case 4:
						if (Object.keys(this.userInfo).length==0) {
							uni.showToast({
								title:"请先登录",
								icon:'none'
							})
							return;
						}
						uni.navigateTo({
							url: '/pageageMine/pages/changePw'
						})
						break;
					case 5://完善信息
						uni.navigateTo({
							url: '/pageageMine/pages/completeInfo'
						})
						break;
					case 6://扫一扫
						let that = this;
						uni.scanCode({
							success: function (res) {
								console.log('条码类型：' + res.scanType);
								console.log('条码内容：' + res.result);
								that.deductPaymentUser(res.result)
							}
						});
						// this.deductPaymentUser('1904741865357090818')
						break;
					case 7://出示付款码
						uni.navigateTo({
							url: '/pageageMine/pages/userPayCode'
						})
						break;
					case 8://设置支付密码
						uni.navigateTo({
							url: '/pageageMine/pages/payPW'
						})
						break;
					default:
						break;
				}
			},
			deductPaymentUser(value){
				// points.deductPaymentUser({})
				uni.navigateTo({
					url: '/pageageMine/pages/userPayPoints?shopId='+value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-custom{
		// background: linear-gradient(to bottom, #7ABCFE, #F7F7F7);
		z-index: 2;
	}
	.bigView{
		background-color: #F7F7F7;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// overflow-y: auto;
	}
	.topView{
		width: 100vw;
		height: 500rpx;
		position: fixed;
		z-index: 0px;
		// background: linear-gradient(to bottom, #7ABCFE, #F7F7F7);
	}
	.title{
		/* background-color: green; */
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: bold;
		color: #000000;
	}
	.calendarView{
		width: calc(100vw - 32px);
		min-height: 220rpx;
		background-color: white;
		margin-left: 16px;
		// margin-top: 10px;
		border-radius: 10px;
		padding-bottom: 10px;
		overflow-y: auto;
		z-index: 2;
	}
	.calendarBottomView{
		width: calc(100vw - 32px);
		display: flex;
		flex-direction: row;
		margin-top: 5px;
	}
	.signView{
		width: calc((100vw - 80px) / 2);
		height: 36px;
		margin-left: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 18px;
		border: 1px solid #0081FF;
		color: #0081FF;
	}
	.signBigView{
		display: flex;
		flex-direction: row;
		// background-color: red;
		align-items: center;
		justify-content: space-between;
		margin-top: 16px;
	}
	.signView2{
		width: 124rpx;
		height: 54rpx;
		// border: 1px solid #D5D5D5;
		border-radius: 27rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 13px;
		font-size: 12px;
		background: linear-gradient( 270deg, rgba(255,106,14,0.65) 0%, #FA5C62 100%);
		color: white;
	}
	.signBottomView{
		display: flex;
		flex-direction: row;
		margin-top: 16px;
		width: calc(100% - 32px);
		margin-left: 16px;
		overflow-x: auto;
		// background-color: red;
	}
	.redPacketView{
		display: flex;
		flex-direction: row;
		align-items: center;
		// background-color: red;
		// align-items: center;
	}
	.redPacketItmeView{
		display: flex;
		flex-direction: column;
		// background-color: orange;
		// align-items: center;
	}
	.redPacketImg{
		width: 52rpx;
		height: 63rpx;
		// position: absolute;
		top: 5px;
		left: 0;
		margin-left: 3px;
	}
	.redPacketImgView{
		position: relative;
		// background-color: orange;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: -3px;
	}
	.redPacketNum{
		position: absolute;
		// background-color: red;
		top: 0;
		margin-top: 2px;
		margin-left: 2px;
		color: #E79E5C;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.redPacketNumSel{
		color: #E79E5C;
	}
	.redPacketNumNor{
		color: #FFE951;
	}
	.redPacketTitle{
		color: #98A0B3;
		font-size: 22rpx;
		margin-top: 7px;
	}
	.redPacketRightLine{
		width: 20px;
		height: 5px;
		
	}
	.redPacketRightLineNor{
		background-color: #DCDFE6;
	}
	.redPacketRightLineSel{
		background: linear-gradient( 180deg, #FF8085 0%, #FA5C62 100%);
	}
	.signItemSome{
		width: calc((100vw - 88px) / 7);
		height: 77px;
		background-color: #E4E7F0;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		justify-content: space-around;
	}
	.signTextSomeNor{
		color: #A3A3A3;
		margin-bottom: 5px;
	}
	.signTextSomeSel{
		color: #686868;
		margin-bottom: 5px;
	}
	.signItem{
		margin-left: 13px;
	}
	.signItem2{
		margin-left: 5px;
	}
	.signItemBgNor{
		background-color: #E4E7F0;
	}
	.signItemBgSel{
		background-color: #F2F5FC;
	}
	.minInfo{
		width: 100vw;//calc(100vw - 32px);
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: center;
		margin-top: 16px;
		// background-color: red;
		.headImg{
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin-left: 40rpx;
		}
	}
	.minInfoCell{
		// display: flex;
		// flex-direction: column;
		// margin-top: 24px;
		// background-color: red;
		// width: calc(100vw-#{32px});
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-left: 16px;
		margin-top: 16px;
		// height: 100px;
		// width:95%;
		width: calc(100vw - #{32px});
		border-radius: 12px;
		
		// height: 51px;
	}
	.minInfoItem{
		
		display: flex;
		flex-direction: row;
		height: 110rpx;
		// margin-left: 16px;
		width: calc(100vw-#{32px});
		align-items: center;
		border-bottom: 0.5px solid #F7F7F7;
		// background-color: green;
	}
	.signTextSome{
		font-size: 11px;
	}
	.signTextTop{
		font-size: 13px;
	}
	.signTextTopNor{
		color: #8C8C8C;
		margin-top: 5px;
	}
	.signTextTopSel{
		color: #247BFD;
		margin-top: 5px;
	}
	.leftIcon{
		width: 44rpx;
		height: 44rpx;
		margin-left: 12px;
		margin-right: 8px;
	}
	.logout{
		width: calc(100vw - 32px);
		height: 110rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 16px;
		margin-top: 16px;
		margin-bottom: 10px;
		color: #313742;//red;
		border-radius: 24rpx;
		font-size: 30rpx;
	}
</style>